<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="historyTop">
          <el-form-item label="采购单号:">
            <el-input v-model="historyTop.voucherno" placeholder="采购单号"></el-input>
          </el-form-item>
          <el-form-item label="入库时间:">
            <el-date-picker
              v-model="historyTop.Ins"
              type="date"
              value="yyyy-MM-dd"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-form-item>
          <!--<el-form-item label="订单状态:">
						<el-select v-model="Status" placeholder="请选择订单状态" @change="selectStatus" filterable>
							<el-option v-for="item in historyTop.Status" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
          </el-form-item>-->
          <el-button type="primary" v-on:click="getPurchaseOrderHistoryList">查询</el-button>
        </el-form>
      </el-col>
      <el-table
        :data="historylist"
        v-loading="listLoading"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="TotalWarehouseOrderId" label="采购单号" sortable align="center"></el-table-column>
        <el-table-column prop="Ins" label="采购日期" align="center" :formatter="formatDate" width="200"></el-table-column>
        <el-table-column prop="Buyer" label="采购人" align="center"></el-table-column>
        <el-table-column prop="SupplierId" sortable label="供货商ID" align="center"></el-table-column>
        <el-table-column prop="SupplierName" label="供货商名称" align="center"></el-table-column>
        <el-table-column prop="Status" label="订单状态" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.Status==1">已订货</span>
              <span v-if="scope.row.Status==2">待付款</span>
              <span v-if="scope.row.Status==3">已付款</span>
              <span v-if="scope.row.Status==4">已入库</span>
              <span v-if="scope.row.Status==5">归档</span>
              <span v-if="scope.row.Status==6">异常单</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleLook(scope.row.TotalWarehouseOrderId)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--商品查看列表-->
      <el-dialog title="查看" :visible.sync="lookFormVisible" width="80%" :before-close="handleClose">
        <el-table
          :data="lookskulist"
          v-loading="listLoading"
          border
          style="width: 100%; margin-top: 20px"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column prop="SKUName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="SKUUnitNo" label="当前单位" align="center"></el-table-column>
          <el-table-column prop="UnitPrice" sortable label="销售价" align="center"></el-table-column>
          <el-table-column prop="TotalPrice" label="总价" sortable align="center"></el-table-column>
          <el-table-column prop="OrderAmount" sortable label="订货数量" align="center"></el-table-column>
        </el-table>
      </el-dialog>

      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right ;margin-top: 10px;"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import {
  PurchaseGetTotalWarehouseOrderShippedList,
  PurchaseGetTotalWarehouseOrderDetailList
} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      typeid: 2,
      list: [],
      Status: 0,
      WarehousingVisible: false,
      listLoading: false,
      SupplierList: [],
      OderVisible: false,
      lookFormVisible: false,
      lookLoading: false,
      logisticsLoading: false,
      logisticsFormVisible: false,
      addLoading: false,
      addFormVisible: false,
      skulist: [],
      page: 1,
      pageSize: 20,
      total: 10000000000,
      multipleSelection: [],
      addForm: {},
      logisticsForm: {},
      historyTop: {
        TotalWarehouseOrderId: "",
        Ins: "1990-01-01",
        voucherno: 0,
        id: "",
        Status: [
          {
            value: 0,
            label: "全部"
          },
          {
            value: 1,
            label: "已订货"
          },
          {
            value: 2,
            label: "待付款"
          },
          {
            value: 3,
            label: "已付款"
          },
          {
            value: 4,
            label: "已入库"
          },
          {
            value: 5,
            label: "归档"
          },
          {
            value: 6,
            label: "异常单"
          }
        ]
      },
      historylist: [],
      lookskulist: [],
      WarehouseIncreaseList: []
    };
  },
  created() {
    this.getPurchaseOrderHistoryList();
  },
  methods: {
    changeNum(row) {
      for (var item in this.WarehouseIncreaseList) {
        if (this.WarehouseIncreaseList[item].ProductId == row.ProductId) {
          this.WarehouseIncreaseList[item] = row;
        }
      }
    },
    handleWarehousing() {
      this.WarehousingVisible = true;
    },
    //发送入库数据
    //			addSubmit() {
    //				var self = this;
    //				var list = self.WarehouseIncreaseList;
    //				var para = {
    //					WarehouseIncreaseList: this.lookskulist,
    //				};
    //				console.log(para)
    //				InWarehouseAddSKU(para).then((res) => {
    //					if(res.data.Status != 1) {
    //						this.$message({
    //							message: res.data.Description,
    //							type: 'error'
    //						});
    //						return;
    //					} else {
    //						self.historyTop.voucherNo = '';
    //						self.status = 0;
    //						this.historyTop.id = '';
    //						self.getPurchaseOrderHistoryList();
    //						this.$message({
    //							message: res.data.Description,
    //							type: 'success'
    //						});
    //					}
    //
    //				})
    //				self.WarehousingVisible = false;
    //				self.lookFormVisible = false;
    //
    //			},
    formatDate: function(row) {
      var date = new Date(row.Ins);
      var yy = date.getFullYear();
      if (yy < 1900) yy = yy + 1900;
      var MM = date.getMonth() + 1;
      if (MM < 10) MM = "0" + MM;
      var dd = date.getDate();
      if (dd < 10) dd = "0" + dd;
      var hh = date.getHours();
      if (hh < 10) hh = "0" + hh;
      var mm = date.getMinutes();
      if (mm < 10) mm = "0" + mm;
      var ss = date.getSeconds();
      if (ss < 10) ss = "0" + ss;
      return yy + "年" + MM + "月" + dd + "日" + " " + hh + ":" + mm + ":" + ss;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        if (index != 3) {
          return;
        }

        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "元";
        }
      });

      return sums;
    },
    selectStatus(val) {
      this.Status = val;
      this.getPurchaseOrderHistoryList();
    },
    //获取历史列表
    getPurchaseOrderHistoryList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        TotalWarehouseOrderId: this.historyTop.voucherno,
        Date: this.historyTop.Ins
      };
      this.listLoading = true;
      //				console.log(para);
      PurchaseGetTotalWarehouseOrderShippedList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log(vdata);
          self.historylist = vdata.DataList;
          self.lookskulist = vdata.DataList;
          self.total = vdata.TotalCount;
        }
        self.listLoading = false;
      });
    },

    //获取详情
    PurchaseGetTotalWarehouseOrderDetailList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        TotalWarehouseOrderId: this.historyTop.TotalWarehouseOrderId
      };
      this.listLoading = true;
      PurchaseGetTotalWarehouseOrderDetailList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log(vdata);
          self.lookskulist = vdata.DataList;
          self.total = vdata.TotalCount;
        }
        self.listLoading = false;
      });
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getPurchaseOrderHistoryList();
    },
    //关闭查看页面
    handleClose(done) {
      this.typeid = 2;
      this.status = 0;
      this.historyTop.id = "";
      this.lookFormVisible = false;
      this.getPurchaseOrderHistoryList();
    },
    //显示商品界面
    handleLook(TotalWarehouseOrderId) {
      this.historyTop.TotalWarehouseOrderId = TotalWarehouseOrderId;
      this.PurchaseGetTotalWarehouseOrderDetailList();
      this.lookFormVisible = true;
    }
  }
};
</script>

<style>
</style>